<template>
  <div >
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>数据字典</el-breadcrumb-item>

      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form  label-width="80px" >
        <el-row>
          <el-col span="8">
            <el-form-item label="字典名称">
              <el-input ></el-input>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="上级分类">
              <el-select >
                   <el-option v-for="superType in superTypes" :value="superType.id"
                              :label="superType.display" :key="superType.id" ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col span="8">
              <el-button type="success">搜索</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-row>
    <el-row>
      <el-button-group>
        <el-button type="primary" icon="el-icon-edit" @click="btnAddSuper">添加大类</el-button>
        <el-button type="primary" icon="el-icon-share" @click="btnAddType">添加小类</el-button>
      </el-button-group>
      <el-table
        :data="dicts"
        fit
        border
        style="width: 100%">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="display"
          label="字典名称"
          width="180">
        </el-table-column>
          <el-table-column
            prop="super.display"
            label="上级分类"
           >
        </el-table-column>
      </el-table>
    </el-row>


    <el-dialog
      title="添加大类"
      :visible.sync="dialogVisible"
      width="30%"
    >
     <el-form label-width="80px">
           <el-form-item  label="字典名称">
               <el-input v-model="superInfo.display"></el-input>
           </el-form-item>
       <el-form-item  label="上级类别">
            <span>一级分类</span>
       </el-form-item>
     </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="btnSaveSuper">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="添加小类"
      :visible.sync="dialogVisible2"
      width="30%"
    >
      <el-form label-width="80px">
        <el-form-item  label="字典名称">
          <el-input v-model="superInfo2.display"></el-input>
        </el-form-item>
        <el-form-item  label="上级类别">
          <el-select v-model="superInfo2.id">
            <el-option v-for="superType in superTypes" :value="superType.id"
                       :label="superType.display" :key="superType.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="btnSaveSuper">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Dict",
    data:function () {
      return {
        dicts:[
          {
             dict_id:1,
             display:'部门',
             super:{
                 id:0,
                 display:'一级分类'
             }
          }
        ],
        superTypes:[],
        dialogVisible:false,
        dialogVisible2:false,
        superInfo:{
           display:'',
           superType:{
               id:0,
               display:'一级分类'
           }
        },superInfo2:{

        }
      }
    },
    mounted() {
      this.initSelect();
    }
    ,methods:{
      initSelect(){
        let _this = this;
        this.axios({
          url:'http//test.org/system/dict/super',
          method:'get',
          dataType:'json'
        }).then(function (res) {

          _this.superTypes = res.data;
        })

      },btnAddSuper(){
            this.dialogVisible = true;
      },btnSaveSuper(){
           /**
            * 0. 取到modal的值
            * 1. 发起ajax
            *  把模态窗体上的内容保存到数据库
            *
            *  2.刷新相关select
            * */

            /*模拟数据生成的id*/
            this.superInfo.id=100;
            /**
             *    this.axios({
             *        url:'http://localhost:3000/dict/save',
             *        method:'post',
             *        dataType:'json'
             *    }).then(function(res)){
             *        if(res.data.flag){
             *
             *           _this.superTypes = res.data.superTypes;
             *        }
             *    }
             * */

            this.superTypes.push(this.superInfo);

            this.dialogVisible = false;

      },btnAddType(){
            this.dialogVisible2=true;
      }
    }
  }
</script>

<style scoped>
  .el-form{
      margin-top: 20px;
  }
</style>
